<template>
  <div class="home-day">
    <div class="header">
      <span class="desc">每天10点更新</span>
      <span class="more" @click="$router.push('/product/category-product-list/181')">
        更多好物<i class="cubeic-arrow"></i>
      </span>
    </div>
    <ul class="list">
      <li v-for="(item, index) in home.day" :key="index" class="list-item" @click="handleClick(item)">
        <div class="image">
          <img v-lazy="item.mainImage.thumbnail_path" v-if="item.mainImage && item.mainImage.thumbnail_path" />
        </div>
        <div class="title">
          {{ item.title }}
        </div>
        <div class="price">
          <span class="new">￥{{ +item.price }}</span>
          <span class="old">￥{{ +item.price_old }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeProductDay',
  props: ['home'],
  data() {
    return {
    }
  },
  methods: {
    handleClick(item) {
      this.$router.push(`/product/detail/${item.id}`)
    }
  }
}
</script>

<style scoped lang="stylus">
.home-day
  margin -5px 10px 0 10px
  padding 10px
  padding-bottom 0
  margin-bottom 10px
  border-radius 15px
  background-image url("../images/product-new.png")
  background-repeat repeat-x
  background-color white
  .header
    height 45px
    line-height 45px
    //background red
    background-image url("../images/title@3x.png")
    background-size 200px 26px
    background-repeat no-repeat
    background-position 5px 6px
    display flex
    justify-content space-between
    .desc
      height 16px
      line-height 16px
      margin-top 8px
      margin-left 83px
      padding-left 8px
      font-weight 600
      font-size 14px
      color #333
      //border-left 1.5px solid #333
      text-indent -9999px
    .more
      font-size 12px
      height 35px
      line-height 35px
      //background #333
      color white
      padding-left 15px
      padding-right 10px
      border-radius 15px
  .list
    overflow-y auto
    //background red
    padding 10px 0
    text-align left
    white-space nowrap
    .list-item
      display inline-block
      width 110px
      margin-right 10px
      padding 5px
      background white
      border-radius 7.5px
      .image
        //padding 20px
        //padding 5px
      .price, .title
        text-align left
        font-size 14px
        font-weight 700
        margin 0 10px
      .title
        color #1a1a1a
        //margin-top -5px
        margin-top 10px
        overflow hidden
        white-space nowrap
        text-overflow ellipsis
      .price
        margin-top 10px
        margin-bottom 10px
        display flex
        justify-content space-between
        .new
          color $second_color
        .old
          text-decoration line-through
          color #808080
          font-size 12px

</style>
